<script setup>
	import FancyButton from '../slotlearn/FancyButton.vue';
	import {
		ref
	} from 'vue'

	const show = ref(true)
</script>

<template>
	<FancyButton>
		<span style="color:cyan">Click me! </span>
		❤️
	</FancyButton>
	<FancyButton></FancyButton>
	<FancyButton @click="show = !show">Transition动画测试</FancyButton>
	<Transition>
		<p v-if="show">普通Transition</p>
	</Transition>

	<Transition name="slide-fade">
		<p v-if="show">有名称的slide-fade</p>
	</Transition>
	<Transition name="bounce">
		<p v-if="show" style="margin-top: 20px; text-align: center;">
			Hello here is some bouncy text!
		</p>
	</Transition>
	
</template>

<style>
	.v-enter-active {
		transition: opacity 0.5s ease;
	}

	.v-leave-active {
		transition: opacity 0.5s ease;
	}

	.v-enter-from,
	.v-leave-to {
		opacity: 0;
	}

	/*
	  进入和离开动画可以使用不同
	  持续时间和速度曲线。
	*/
	.slide-fade-enter-active {
		transition: all 0.3s ease-out;
	}

	.slide-fade-leave-active {
		transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
	}

	.slide-fade-enter-from,
	.slide-fade-leave-to {
		transform: translateX(20px);
		opacity: 0;
	}

	.bounce-enter-active {
		animation: bounce-in 0.5s;
	}

	.bounce-leave-active {
		animation: bounce-in 0.5s reverse;
	}

	@keyframes bounce-in {
		0% {
			transform: scale(0);
		}

		50% {
			transform: scale(1.25);
		}

		100% {
			transform: scale(1);
		}
	}


</style>